<template>
	<view class="container">
		<!-- 头部轮播 -->
		<view class="carousel-section">
			<!-- #ifdef MP -->
			<!-- 标题栏和状态栏占位符 -->
			<view class="titleNview-placing"></view>
			<!-- #endif -->

			<!-- 背景色区域 -->
			<view class="titleNview-background"></view>

			<!-- Logo名称及自提点选择区域 -->

			<view class="merchant-wrapper" :style="{ top: searchBarTop + 'px', height: searchBarHeight + 'px'}">
				<view class="title">冰娇家政</view>
				<navigator class="merchant-addr" url="/pages/index/city">
					<uni-icons type="location-filled" color="#ffffff" size="20"></uni-icons>
					<view>{{currentCity.name||'请选择城市'}}</view>
					<uni-icons type="right" color="#ffffff"></uni-icons>
				</navigator>
			</view>

			<!-- 轮播图 -->
			<swiper :autoplay="true" :interval="2000" class="carousel" circular @change="swiperChange">
				<swiper-item v-for="(item, index) in carouselList" :key="index" class="carousel-item"
					@click="navSwiper(item)">
					<image :src="item.url" />
				</swiper-item>
			</swiper>
			<view class="swiper-dots" v-if="carouselList.length>0">
				<text class="num">{{swiperCurrent+1}}</text>
				<text class="sign">/</text>
				<text class="num">{{swiperLength}}</text>
			</view>
		</view>

		<!-- 搜索栏区域 -->
		<view class="search-box-wrapper">
			<view class="search-box">
				<image class='search-icon' src='/static/image/zoom.png'></image>
				<input class="search-input" type="text" placeholder="家庭保洁" :value="searchKey" @click="navSearch" />
				<span class="search-text" @click="navSearch">搜索</span>
			</view>
			<!-- <view class="grid-item-box" @click="navCoupon">
				<image class="grid-image" src="/static/image/lingquan.png"></image>
				<text class="grid-text">领券</text>
			</view> -->
			<!-- #ifdef MP-WEIXIN -->
			<!-- <view class="grid-item-box" @click="navLiveRooms">
				<image class="grid-image" src="/static/image/zhibo.png"></image>
				<text class="grid-text">直播</text>
			</view> -->
			<!-- #endif -->
		</view>



		<!-- 通知栏 -->
		<view class="m-t" v-if="announcement.length>0">
			<uni-notice-bar scrollable="true" showIcon="true" showClose="true" showGetMore="true"
				:text="announcement[0].title" single="true" moreText="更多" @getmore="navAnnouncement"></uni-notice-bar>
		</view>

		<!-- 新人专区 -->
		<view class="gift-product-wrapper" v-if="giftProductList.length>0">
			<view class="gift-product">
				<view class="f-header">
					<view class="tit-box">
						<text class="tit" @click="navToNewCustomerProductPage()">新人专享</text>
					</view>
					<text class="tit2">超低价9.9元起</text>
				</view>
				<view class="gift-product-list-wrapper">
					<scroll-view class="gift-product-list" scroll-x>
						<view class="scoll-wrapper">
							<view v-if="index<5" v-for="(giftProduct,index) in giftProductList" class="gift-product-item"
								@click="navToNewCustomerProductPage()">
								<image class="product-image" :src="giftProduct.productDTO.productMainImage.url" mode="aspectFill"></image>
								<image class="image-tag" src="/static/image/new-customer-price.png" mode="aspectFit"></image>
								<text class="title clamp">{{giftProduct.productDTO.productName}}</text>
								<span class="price">￥{{giftProduct.productUnitPrice}}</span>
								<span class="list-price">￥{{giftProduct.productDTO.unitPriceStandard}}</span>
							</view>
							<view class="more" @click="navToNewCustomerProductPage()">
								<text>查看全部</text>
							</view>
						</view>
					</scroll-view>
				</view>
			</view>
		</view>
		<!-- 上下轮播的广告 -->
		<swiper :autoplay="true" :interval="3000" style="margin-top:10px;height:100px" class="carousel" vertical="true" circular v-if="ads.length>0">
			<swiper-item v-for="(ad, index) in ads" :key="index" class="carousel-item"
				@click="navAD(ad)">
				<image @click="navAD(ad)" :src="ad.url" mode="scaleToFill"></image>
			</swiper-item>
		</swiper>
		<!-- 广告区域 -->
		<!-- <view class="ad-1" v-if="ads.length>0">
			<image @click="navAD(ads[0])" :src="ads[0].url" mode="scaleToFit"></image>
		</view> -->


<!--		&lt;!&ndash; 商品促销区 &ndash;&gt;-->
<!--		<view class="promotion-wrapper">-->
<!--			<view class="promotion-item"  @click="navSecKill()" v-if="secKills.length>0 && secKill.secKillProductList.length>0">-->
<!--				<view class="f-header">-->
<!--					<view class="tit-box">-->
<!--						<text class="tit">限时秒杀</text>-->
<!--					</view>-->
<!--					<view class="tit2">-->
<!--						<uni-countdown class="countdown" :show-day="false" :day="secKillCountDown.days" :hour="secKillCountDown.hours" :minute="secKillCountDown.minutes"-->
<!--				 :second="secKillCountDown.seconds" color="#FFFFFF" background-color="#333333" />-->
<!--					</view>-->
<!--				</view>-->
<!--				<view class="promotion-item-product-list-wrapper">-->
<!--					<scroll-view class="promotion-item-product-list" scroll-x>-->
<!--						<view class="scoll-wrapper">-->
<!--							<view v-for="(item, index) in secKill.secKillProductList" :key="index" class="promotion-item-product">-->
<!--								-->
<!--								<image class="product-image" :src="item.productDTO.productMainImage.url" mode="aspectFill"></image>-->
<!--								<image class="image-tag" src="/static/image/seckill-price.png" mode="aspectFit"></image>-->
<!--								<text class="title clamp">{{item.productDTO.productName}}</text>-->
<!--								<span class="price">￥{{item.unitPrice}}</span>-->
<!--								<span class="list-price">￥{{item.productDTO.unitPriceStandard}}</span>-->
<!--							</view>-->
<!--						</view>-->
<!--					</scroll-view>-->
<!--				</view>-->
<!--			</view>-->
<!--			<view class="promotion-item" v-for="group in productGroups" v-if="group.productList.length>0">-->
<!--				<view class="f-header" @click="navToGroupPage(group)">-->
<!--					<image :src="group.iconUrl" v-if="group.iconUrl"></image>-->
<!--					<view class="tit-box">-->
<!--						<text class="tit">{{group.groupName}}</text>-->
<!--					</view>-->
<!--					<text class="tit2">{{group.groupDescription}}</text>-->
<!--				</view>-->
<!--				<view class="promotion-item-product-list-wrapper">-->
<!--					<scroll-view class="promotion-item-product-list" scroll-x>-->
<!--						<view class="scoll-wrapper">-->
<!--							<view v-for="product in group.productList" class="promotion-item-product"-->
<!--								@click="navToDetailPage(product)">-->
<!--								<image class="product-image" :src="product.productMainImage.url" mode="aspectFill"></image>-->
<!--								<text class="title clamp">{{product.productName}}</text>-->
<!--								<span class="price">￥{{product.unitPrice}}</span>-->
<!--								<span class="list-price">￥{{product.unitPriceStandard}}</span>-->
<!--							</view>-->
<!--							<view class="more" @click="navToGroupPage(group)">-->
<!--								<text>查看全部</text>-->
<!--							</view>-->
<!--						</view>-->
<!--					</scroll-view>-->
<!--				</view>-->
<!--			</view>-->
<!--		</view>-->


		<product-list :productList="goodsList" :cols="1"></product-list>
		<uni-load-more :status="loadingType"></uni-load-more>
		<!-- 快捷功能浮动按钮 -->
		<uni-fab v-if="activeLayout.fabDisplayedHome" ref="fab" :pattern="pattern" :content="content"
			horizontal="right" vertical="bottom" direction="horizontal" @trigger="trigger" @fabClick="fabClick" />
		<login-banner></login-banner>
		<!-- <cashier></cashier> -->
		<!-- 意见反馈 -->
		<u-mask :show="showFeedback" :mask-click-able="false">
			<view class="feedback">
				<view class="feedback-title">意见反馈</view>
				<view class="feedback-desc">感谢访问，如果您有好的建议，可以反馈在这里，我们会努力改善产品和服务。</view>
				<view class="feedback-action"><button type="default" open-type="feedback">马上反馈</button></view>
			</view>
			<view class="feedback-close"><u-icon size="60" name="close-circle" @click="showFeedback=false"></u-icon></view>
		</u-mask>
		<!-- 商务咨询 -->
		<u-mask :show="showSales" :mask-click-able="false">
			<view class="sales"><view class="sales-title">商务咨询</view>
				<view class="sales-desc" v-if="applicationConfig.applicationSalesQrcode">长按识别二维码添加商务微信</view>
				<view v-if="applicationConfig.applicationSalesQrcode">
					<image :show-menu-by-longpress="true" :src="applicationConfig.applicationSalesQrcode" mode="aspectFill" style="width:100%"></image>
				</view>
				<view class="sales-action" v-if="applicationConfig.applicationSalesPhone"><button type="default" @click="call(applicationConfig.applicationSalesPhone)">拨打{{applicationConfig.applicationSalesPhone}}</button></view>
			</view>
			<view class="sales-close"><u-icon size="60" name="close-circle" @click="showSales=false"></u-icon></view>
		</u-mask>
		<!-- 新人领取优惠券 -->
		<u-mask :show="showGift" :mask-click-able="false">
			<view class="gift">
				<view class="gift-title">
					新人有礼
				</view>
				<view class="gift-desc">
					恭喜您获得以下福利!
				</view>
				<view class="gift-image">
					<image src="../../static/image/gift.png" ></image>
				</view>

				<view class="gift-content">
					<view class="gift-item" v-for="giftCoupon in giftCouponList">
						<!-- 优惠券 -->
						<view class="gift-item-label">
							优惠券{{giftCoupon.couponDTO.limitPerUser}}张
						</view>
						<view class="gift-item-value">
							<button>{{giftCoupon.couponDTO.name}}</button>
						</view>
					</view>

				</view>
				<view class="gift-message">
					{{receiveGiftMessage}}
				</view>
				<view class="gift-action">
					<u-button :loading="receiveLoading" :ripple="true" @click="receiveProfitWelfare">立即领取</u-button>
				</view>
			</view>
			<view class="gift-close">
				<u-icon size="80" name="close-circle" @click="showGift=false"></u-icon>
			</view>
		</u-mask>
	</view>
</template>

<script>
	import uniCountdown from "@/components/uni-countdown/uni-countdown.vue"
	import uniNoticeBar from '@/components/uni-notice-bar/uni-notice-bar.vue'
	import uniGrid from "@/components/uni-grid/uni-grid.vue"
	import uniGridItem from "@/components/uni-grid-item/uni-grid-item.vue"
	import uniBadge from '@/components/uni-badge/uni-badge.vue'
	import uniNumberBox from '@/components/uni-number-box.vue'
	import productList from '@/components/product-list.vue'
	import loginBanner from '@/components/login-banner.vue'
	import cashier from '@/components/cashier.vue'
	import uniFab from '@/components/uni-fab/uni-fab.vue'
	import {
		mapState,
		mapMutations
	} from 'vuex';
	let windowWidth = 0,
		scrollTimer = false,
		tabBar;
	export default {
		components: {
			uniCountdown,
			uniNoticeBar,
			uniGrid,
			uniGridItem,
			uniBadge,
			uniNumberBox,
			productList,
			loginBanner,
			cashier,
			uniFab
		},
		data() {
			return {
				searchBarTop:10,
				searchBarHeight:50,
				titleNViewBackground: '',
				swiperCurrent: 0,
				swiperLength: 0,
				carouselList: [],
				cates: [],
				secKill:{},
				secKills: [],
				secKillCountDown: {},
				groupBuyProducts: [],
				groupBuyIndex: 1,
				productGroups: [], //商品组
				tabCurrentIndex: 0, //当前选项卡索引
				loadingType: '', //加载状态
				pageSize: 5,
				pageNo: 1,
				searchKey: "",
				ads: [],
				notice: [],
				announcement: [],
				goodsList: [], //商品列表
				productSkuClass: 'none',
				secKillFlag: 'END' ,//秒杀结束标志符(END表示已结束)
				skuShowClass: 'none',
				product:{},
				productSku:{},
				showGift:false,	//新人优惠券领取弹窗
				giftList:[],	//新人专享数据列表
				giftProductList:[],	//新人专享商品
				giftCouponList:[],	//新人可领取优惠券
				receiveLoading:false,
				receiveGiftMessage:'',
				showFeedback: false, //意见反馈弹窗
				showSales: false, //商务联系弹窗
				pattern: {
					color: '#909399',
					backgroundColor: '#fff',
					selectedColor: '#909399',
					icon: 'headphones',
					iconColor: '#fff'
				},
				content: [{
						iconPath: '/static/image/question.png',
						selectedIconPath: '/static/image/question.png',
						text: '帮助中心',
						active: false
					},
					{
						iconPath: '/static/image/phone.png',
						selectedIconPath: '/static/image/phone.png',
						text: '商务咨询',
						active: false
					},
					// #ifdef MP-WEIXIN
					{
						iconPath: '/static/image/feedback.png',
						selectedIconPath: '/static/image/feedback.png',
						text: '意见反馈',
						active: false
					}
					// #endif
				]
			};
		},
		computed: {
			...mapState(['hasLogin', 'hasMerchant', 'userInfo', 'merchantInfo','cartInfo','footPrint', 'applicationConfig','currentCity','uiConfig']),
			activeLayout: function() {
				return this.uiConfig.activeLayout;
			}
		},
		onReachBottom() {
			if (this.loadingType == 'more') {
				this.pageNo++;
				this.searchRecommendProduct();
			}
		},
		onLoad(options) {
      // this.getRegionList();
			this.loadData();
			// #ifdef MP-WEIXIN
			this.getTopIconDistance();
			// #endif
		},
		onShow(){
			//登录后如果没有领取优惠券, 每次首页都会弹窗提示领取
			if(this.hasLogin && !this.userInfo.profitWelfareReceived){
				if(this.giftCouponList.length>0){
					this.receiveGiftMessage = '';
					this.showGift = true;//有待领取新人福利, 打开领取弹窗
				}
				
			}
		},
		methods: {
			...mapMutations(['updateCartInfo']),
			setSearchKey(searchKey) {
				this.searchKey = searchKey;
			},
			getTopIconDistance() {
				uni.getSystemInfo({
					success: (res) => {
						// 获取手机顶部状态栏的高度
						const statusBarHeight = res.statusBarHeight || 0;

						// 获取导航栏的高度（手机状态栏高度 + 胶囊高度 + 胶囊的上下间距）
						const menuButtonInfo = uni.getMenuButtonBoundingClientRect();
						const navBarHeight = menuButtonInfo.height + (menuButtonInfo.top - statusBarHeight) *
						2;

						this.searchBarTop = menuButtonInfo.top;
						this.searchBarHeight = menuButtonInfo.height;
					},
					fail: (err) => {
						console.error('获取系统信息失败:', err);
					}
				});
			},
			async loadData() {
				this.inquirySwiper();
				this.inquiryAd();
				this.inquiryProductCate();
				this.inquirySecKill();
				this.inquiryProductGroup();
				this.searchRecommendProduct();
				this.inquiryProfitWelfare();
			},
			//查询推荐商品
			searchRecommendProduct() {
				var keyArray = [];
				keyArray.push('ON_SALE');
				keyArray.push('RECOMMEND');
				let searchData = {
					'keyArray': keyArray,
					'onSale': true,
					'recommend': true,
					'startIndex': (this.pageNo - 1) * this.pageSize,
					'pageSize': this.pageSize,
				};
				this.searchProduct(searchData);
			},
			//查询商品
			searchProduct(searchData) {
				//加载中
				this.loadingType = 'loading';
				this.$api.request.goodsList(searchData, res => {
					uni.stopPullDownRefresh();
					if (res.body.status.statusCode === '0') {
						var goodsList = res.body.data.products;
						/* 将商品在购物车的数量设置在cartNum属性中 */
						if(this.hasLogin && this.cartInfo)
							this.$api.util.prodCartNum(goodsList,this.cartInfo);
						if (this.pageNo === 1)
							this.goodsList = goodsList;
						else
							this.goodsList = this.goodsList.concat(goodsList);
						this.total = res.body.data.total;
						if (this.goodsList.length >= this.total) {
							this.loadingType = 'noMore';
						} else {
							this.loadingType = 'more';
						}
					} else {
						this.loadingType = 'more';
						console.log(res.body.status.errorDesc);
					}
				}, true);
			},
			//轮播图
			inquirySwiper() {
				this.$api.request.slider({}, res => {
					if (res.body.status.statusCode === '0') {
						this.carouselList = res.body.data.swipers;
						this.swiperLength = this.carouselList.length;
						// this.titleNViewBackground = this.carouselList[0].background;
					} else {
						console.log(res.body.status.errorDesc);
					}
				});
			},
			//查询新人福利
			inquiryProfitWelfare() {
				let that = this;
				this.$api.request.inquiryProfitWelfare({}, res => {
					if (res.body.status.statusCode === '0') {
						this.giftList = res.body.data.welfares;
						var giftProductList = [];
						var giftCouponList = [];
						this.giftList.forEach(function(gift,index){
							if(gift.welfareType == 'PRODUCT'){
								giftProductList.push(gift);
							}else if(gift.welfareType == 'COUPON'){
								giftCouponList.push(gift);
							}
						})
						this.giftProductList = giftProductList;
						this.giftCouponList = giftCouponList;
					} else {
						console.log(res.body.status.errorDesc);
					}
				});
			},
			//领取新人福利
			receiveProfitWelfare() {
				this.receiveLoading = true;
				this.$api.request.receiveProfitWelfare({
					userUuid:this.userInfo.userUuid
				}, res => {
					this.receiveLoading = false;
					if (res.body.status.statusCode === '0') {
						this.$api.msg('领取成功');
						this.receiveGiftMessage = '';
						this.showGift = false;
						//标记新人福利已领取
						this.userInfo.profitWelfareReceived = true;
					} else {
						this.receiveGiftMessage = res.body.status.errorDesc
					}
				});
			},
			//首页广告
			inquiryAd() {
				this.$api.request.advert({
					location: '首页'
				}, res => {
					if (res.body.status.statusCode === '0') {
						this.ads = res.body.data.ads;
					} else {
						console.log(res.body.status.errorDesc);
					}
				});
			},
			resetPage() {
				this.goodsList = [];
				this.pageNo = 1;
			},
			//首页商品类目
			inquiryProductCate() {
				let that = this;
				this.$api.request.homeProductCate({

				}, res => {
					if (res.body.status.statusCode === '0') {
						this.cates = res.body.data.cates;
					} else {
						console.log(res.body.status.errorDesc);
					}
				});
			},
			//首页首页商品组
			inquiryProductGroup() {
				let that = this;
				this.$api.request.productGroup({

				}, res => {
					if (res.body.status.statusCode === '0') {
						this.productGroups = res.body.data.groups;
					} else {
						console.log(res.body.status.errorDesc);
					}
				});
			},
			//首页秒杀
			inquirySecKill() {
				let that = this;
				this.$api.request.secKill({
			
				}, res => {
					if (res.body.status.statusCode === '0') {
						this.secKills = res.body.data.secKills;
						//如果有多个同时进行的秒杀活动，使用第一个秒杀活动做为倒计时
						if (this.secKills.length > 0) {
							this.secKill = this.secKills[0];
							var endTimeStr = this.secKill.endTime;
							var endTime = new Date(Date.parse(endTimeStr.replace(/-/g, "/")));
							var startTimeStr = this.secKill.startTime;
							var startTime = new Date(Date.parse(startTimeStr.replace(/-/g, "/")));
							var diff = that.$api.util.getCountDownTimes(this.secKill.endTime);
							this.secKillCountDown = {
								days: diff[0],
								hours: diff[1],
								minutes: diff[2],
								seconds: diff[3]
							}
						}
					} else {
						console.log(res.body.status.errorDesc);
					}
				});
			},
			//弹出规格选择框
			popupProductSku(id) {
				/* 先查询商品详情数据 */
				let postData = {
					productUuid: id
				}
				this.$api.request.goodsDetail(postData, res => {
					if (res.body.status.statusCode === '0') {
						this.product = res.body.data;
						this.productSku = this.product.skuList[0];
						this.skuShowClass = 'show';
						uni.hideTabBar();
					} else {
						console.log(res.body.status.errorDesc);
					}
				},false);
			},
			//修改购买商品数量
			numberChange(e) {
				this.goodsList[e.index].cartNum = e.number;
				if(this.goodsList[e.index].skuEnabled){
					//多规格商品需要先选择商品规格
					this.popupProductSku(this.goodsList[e.index].productUuid);
				}else
					//单规格直接添加到购物车
					this.addProductToCart(this.goodsList[e.index]);
			},
			skuSelected(data){
				this.productSku = data.sku;
				this.skuShowClass = data.skuShow;
			},
			skuCancelled(data){
				this.skuShowClass = data.skuShow;
			},
			clickAddToCart(item){
				if(item.skuEnabled){
					//多规格商品需要先选择商品规格
					this.popupProductSku(item.productUuid);
				}else{
					item.cartNum = 1;
					this.addProductToCart(item);
				}
			},
			//添加商品到购物车
			addProductToCart(item) {
				let postData = {
					unit: item.cartNum,
					userDTO: {
						userUuid: this.userInfo.userUuid
					}
				}
				postData.productDTO = {
					productUuid: item.productUuid
				}
				this.$api.request.addCart(postData, res => {
					if (res.body.status.statusCode === '0') {
						this.syncUserCart(function(){
							console.log('同步购物车数据成功');
						});
					} else {
						this.$api.msg(res.body.status.errorDesc);
					}
				},true);
			},
			syncUserCart(callback) {
				let postData = {
					userUuid: this.userInfo.userUuid
				}
				this.$api.request.cartList(postData, res => {
					if (res.body.status.statusCode === '0') {
						let cartList = res.body.data.carts;
						this.updateCartInfo(cartList);
						if(callback) callback();
					} else {
						console.log(res.body.status.errorDesc);
					}
				},false);
			},
			//轮播图切换修改背景色
			swiperChange(e) {
				const index = e.detail.current;
				this.swiperCurrent = index;
				this.titleNViewBackground = this.carouselList[index].background;
			},
			/* 多规格底部弹窗 */
			popProductSku() {
				this.$nextTick(() => {
					this.$refs['productSkuRef'].open()
				})
			},
			closeProductSku() {
				this.$refs['productSkuRef'].close()
			},
			//规格弹窗开关
			toggleSpec() {
				if (this.productSkuClass === 'show') {
					this.productSkuClass = 'hide';
					setTimeout(() => {
						this.productSkuClass = 'none';
					}, 250);
				} else if (this.productSkuClass === 'none') {
					this.productSkuClass = 'show';
				}
			},
			//选择规格
			selectProductSku(productSku) {
				this.productSku = productSku;
			},
			//详情页
			navToDetailPage(item) {
				let id = item.productUuid;
				uni.navigateTo({
					url: '/pages/product/product?id=' + id
				})
			},
			navToNewCustomerProductPage(){
				uni.navigateTo({
					url: '/pages/product/newcustomer'
				})
			},
			//轮播图链接
			navSwiper(item) {
				this.$api.util.navSwiper(item);
			},
			//广告链接
			navAD(item) {
				this.$api.util.navAD(item);
			},
			//商品列表页
			navToGroupPage(group) {
				let groupId = group.groupUuid;
				uni.navigateTo({
					url: '/pages/product/group?groupId=' + groupId
				})
			},
			//领券中心
			navCoupon() {
				uni.navigateTo({
					url: '/pages/coupon/list'
				})
			},
			//限时秒杀
			navSecKill() {
				uni.navigateTo({
					url: '/pages/product/seckillList'
				})
			},
			//导航至商品分类页
			navToCate(tid) {
				uni.reLaunch({
					url: '/pages/category/category?cateId=' + tid
				})
			},
			//导航至官方资讯页面
			navAnnouncement: function() {
				var announcement = JSON.stringify(this.announcement);
				announcement = encodeURIComponent(announcement);
				uni.navigateTo({
					url: '/pages/notice/notice?data=' + announcement
				});
			},
			//跳转到发现页
			navFind: function() {
				uni.switchTab({
					url: '/pages/content/index'
				})
			},
			//图文或音视频详情
			navToDetails(item) {
				let url = '';
				if (item.articleType === '1' && item.linkType == '自定义内容')
					url = '/pages/content/details?id=' + item.articleUuid;
				if (item.articleType === '1' && item.linkType == '外部链接')
					url = '/pages/content/webView?src=' + item.content;
				if (item.articleType === '2' || item.articleType === '3')
					url = '/pages/content/videoDetails?id=' + item.articleUuid;
				uni.navigateTo({
					url: url
				})
			},
			//客服中心
			navCustomerService() {
				uni.navigateTo({
					url: '/pages/help/help'
				})
			},
			//附近门店
			navMerchant() {
				uni.navigateTo({
					url: '/pages/merchant/nearby'
				})
			},
			//直播间
			navLiveRooms() {
				uni.navigateTo({
					url: '/pages/live/room-list'
				})
			},
			navSearch() {
				uni.navigateTo({
					url: '/pages/index/search'
				})
			},
			trigger(e) {
				if (e.index === 0) {
					this.navCustomerService();
				} else if (e.index === 1) {
					//后台基础设置配置了联系电话或者联系微信
					if (this.applicationConfig.applicationSalesPhone || this.applicationConfig.applicationSalesQrcode)
						this.showSales = true;
				} else if (e.index === 2) {
					this.showFeedback = 1;
				}
			},
			call(phoneNumber) {
				uni.makePhoneCall({
					phoneNumber: phoneNumber
				});
			},
			fabClick() {
				//点击悬浮按钮事件
			},
      // getRegionList(){
      //   this.$api.request.getRegionList(res => {
      //     console.log('获取地区列表成功:', res);
      //     if (res.body.status.statusCode === '0') {
      //       // this.regionList = res.body.data;
      //     } else {
      //       console.log(res.body.status.errorDesc);
      //     }
      //   },true);
      // }
		},

		// #ifndef MP
		// 标题栏input搜索框点击
		onNavigationBarSearchInputClicked: async function(e) {
			// this.$api.msg('点击了搜索框');
			uni.navigateTo({
				url: '/pages/index/search'
			})
		},
		//点击导航栏 buttons 时触发
		onNavigationBarButtonTap(e) {
			const index = e.index;
			if (index === 0) {
				// this.$api.msg('点击了扫描');
				uni.scanCode({
					success: function(res) {
						console.log('条码类型：' + res.scanType);
						console.log('条码内容：' + res.result);
						uni.navigateTo({
							url: '/pages/content/webView?src=' + res.result
						})
					}
				})
			} else if (index === 1) {
				// #ifdef APP-PLUS
				const pages = getCurrentPages();
				const page = pages[pages.length - 1];
				const currentWebview = page.$getAppWebview();
				currentWebview.hideTitleNViewButtonRedDot({
					index
				});
				// #endif
				uni.navigateTo({
					url: '/pages/notice/list'
				})
			}
		}
		// #endif
	}
</script>

<style lang="scss">
	page {
		background: $page-bg-color;
	}

	.m-t {
		margin-top: 16upx;
	}

	//顶部小程序Logo名称和自提点选择栏
	.merchant-wrapper {
		position: absolute;
		width: 100%;
		height: 100upx;
		padding: 0 30upx;
		color: #fff;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		// #ifdef MP
		justify-content: left;	
		// #endif

		.title {
			font-size: 36upx;
			font-weight: bold;
		}

		.merchant-addr {
			display: flex;
			flex-direction: row;
			align-items: center;
			font-size: $font-lg;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
			// #ifdef MP
			margin-left: 60upx;	
			// #endif
			i {
				margin-right: 6upx;
			}

			.arrow {
				margin-left: 6upx;
				font-size: $font-sm;
				columns: $font-color-light;
			}
		}

		.merchant-name {
			display: flex;
			flex-direction: row;
			align-items: center;
			font-size: $font-sm;

			.merchant-photo {
				margin-right: 20upx;

				image {
					width: 80upx;
					height: 80upx;
					border-radius: 50%;
				}
			}

			.merchant-title {
				text-align: center;
				padding: 2upx;
				background: linear-gradient(left, #f9e6af, #ffd465);
				border-radius: 20upx 0 20upx 0;
				color: $font-color-light;
				margin-top: 4upx;
			}
		}
	}

	/* 头部 轮播图 */
	.carousel-section {
		position: relative;
		padding-top: 10px;

		.titleNview-placing {
			height: var(--status-bar-height);
			padding-top: 44px;
			box-sizing: content-box;
		}

		.titleNview-background {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 426upx;
			transition: .4s;
			background: $base-color;
		}
	}

	/* #ifdef MP */
	.carousel-section {
		.titleNview-background {
			height: 526upx;
		}
		.carousel {
			width: 90%;
			margin: 5% 5% 10upx 5%;
			.carousel-item {
				padding: 0;
			}
		}
	}

	/* #endif */

	.carousel {
		width: 100%;
		height: 350upx;
		margin-top: 100upx;
		margin-bottom: 20upx;

		.carousel-item {
			width: 100%;
			height: 100%;
			padding: 0 28upx;
			overflow: hidden;
		}

		image {
			width: 100%;
			height: 100%;
			border-radius: 10upx;
		}
	}

	.swiper-dots {
		display: flex;
		position: absolute;
		left: 60upx;
		bottom: 15upx;
		width: 72upx;
		height: 36upx;
		background-image: url();
		background-size: 100% 100%;

		.num {
			width: 36upx;
			height: 36upx;
			border-radius: 50px;
			font-size: 24upx;
			color: #fff;
			text-align: center;
			line-height: 36upx;
		}

		.sign {
			position: absolute;
			top: 0;
			left: 50%;
			line-height: 36upx;
			font-size: 12upx;
			color: #fff;
			transform: translateX(-50%);
		}
	}


	/* 分类区域 */
	.cate-section {
		padding: 30upx 22upx;
		background: #fff;
		white-space: nowrap;
		width: 100%;

		.cate-item {
			font-size: $font-sm + 2upx;
			color: $font-color-dark;
			display: inline-block;
			width: 19%;
			text-align: center;
			vertical-align: top;

			.cate-item-child-b {
				margin-top: 30upx;
			}
		}

		image {
			width: 88upx;
			height: 88upx;
			margin-bottom: 14upx;
			border-radius: 50%;
			opacity: .7;
			box-shadow: 4upx 4upx 20upx rgba(250, 67, 106, 0.3);
		}
	}

	// 广告栏区域
	.ad-1 {
		// width: 100%;
		height: 210upx;
		margin: 10upx;
		background: #fff;

		image {
			width: 100%;
			height: 100%;
		}
	}

	// 搜索栏区域
	.search-box-wrapper {
		display: flex;
		background-color: $base-color;

		.search-box {
			width: 100%;
			padding: 20upx 20upx;
			position: relative;
			.search-input {
				flex: 1;
				height: 100upx;
				line-height: 100upx;
				text-align: left;
				padding-left: 100upx;
				padding-right: 120upx;
				font-size: 28upx;
				color: #ffffff;
				border-radius: 20px;
				background: #ffffff;
			}

			.search-icon {
				position: absolute;
				width: 80upx;
				height: 80upx;
				top: 70upx;
				left: 30upx;
				transform: translateY(-50%);
			}

			.search-text {
				position: absolute;
				top: 70upx;
				right: 48upx;
				color: $base-color;
				font-size: $font-lg;
				transform: translateY(-50%);
			}
		}

		.grid-item-box {
			flex: 1;
			/* #ifndef APP-NVUE */
			display: flex;
			/* #endif */
			flex-direction: column;
			align-items: center;
			justify-content: center;
			// padding: 15px 0;
		}

		.grid-image {
			width: 80upx;
			height: 80upx;
		}

		.grid-text {
			color: #ffffff;
			font-size: $font-sm;
		}

		.grid-dot {
			position: absolute;
			top: 5px;
			right: 15px;
		}
	}

	// 促销活动区
	.promotion-wrapper {
		display: flex;
		flex-wrap: wrap;
		margin: 10upx 0 10upx 0;

		.promotion-item {
			width: 50%;

			.f-header {
				display: flex;
				align-items: center;
				height: 80upx;
				padding: 20upx;
				background: #fff;

				image {
					flex-shrink: 0;
					width: 80upx;
					height: 80upx;
					margin-right: 20upx;
				}

				.tit-box {
					flex: 1;
					display: flex;
					flex-direction: column;
				}

				.tit {
					font-size: $font-lg +2upx;
					font-weight: bold;
					color: $font-color-dark;
					line-height: 1.3;
				}

				.tit2 {
					font-size: $font-base;
					color: $font-color-light;
					line-height: 1.3;
				}

				.icon-you {
					font-size: $font-lg +2upx;
					color: $font-color-light;
				}
			}

			.promotion-item-product-list-wrapper {
				width: 100%;
				overflow: hidden;
				margin-bottom: 10upx;

				.promotion-item-product-list {
					.scoll-wrapper {
						display: flex;
						align-items: flex-start;

						.more {
							display: flex;
							align-items: center;
							justify-content: center;
							flex-direction: column;
							flex-shrink: 0;
							width: 180upx;
							height: 180upx;
							border-radius: 6upx;
							background: #f3f3f3;
							font-size: $font-base;
							color: $font-color-light;

							text:first-child {
								margin-bottom: 4upx;
							}
						}
					}

					white-space: nowrap;
					padding: 20upx;
					border-radius: 6upx;
					background: #fff;
					box-shadow: 1px 1px 5px rgba(0, 0, 0, .2);
					position: relative;
					z-index: 1;

					.promotion-item-product {
						position: relative;
						width: 160upx;
						margin-right: 20upx;
						font-size: $font-sm+2upx;
						color: $font-color-dark;
						line-height: 1.8;

						.product-image {
							width: 160upx;
							height: 160upx;
							border-radius: 6upx;
						}

						.price {
							background: $price-color;
							color: #ffffff;
							padding: 5upx;
						}
					}
				}
			}
		}
	}
	
	// 新人商品专区
	.gift-product-wrapper {
		display: flex;
		flex-wrap: wrap;
		margin: 10upx 0 10upx 0;
	
		.gift-product {
			width: 100%;
	
			.f-header {
				display: flex;
				align-items: center;
				height: 80upx;
				padding: 20upx;
				background: #fff;
	
				image {
					flex-shrink: 0;
					width: 80upx;
					height: 80upx;
					margin-right: 20upx;
				}
	
				.tit-box {
					flex: 1;
					display: flex;
					flex-direction: column;
				}
	
				.tit {
					font-size: $font-lg +2upx;
					font-weight: bold;
					color: $font-color-dark;
					line-height: 1.3;
				}
	
				.tit2 {
					font-size: $font-base;
					color: $font-color-light;
					line-height: 1.3;
				}
	
				.icon-you {
					font-size: $font-lg +2upx;
					color: $font-color-light;
				}
			}
	
			.gift-product-list-wrapper {
				width: 100%;
				overflow: hidden;
				margin-bottom: 10upx;
	
				.gift-product-list {
					.scoll-wrapper {
						display: flex;
						align-items: flex-start;
	
						.more {
							display: flex;
							align-items: center;
							justify-content: center;
							flex-direction: column;
							flex-shrink: 0;
							width: 180upx;
							height: 180upx;
							border-radius: 6upx;
							background: #f3f3f3;
							font-size: $font-base;
							color: $font-color-light;
	
							text:first-child {
								margin-bottom: 4upx;
							}
						}
					}
	
					white-space: nowrap;
					padding: 20upx;
					padding-right: 50upx;
					border-radius: 6upx;
					background: #fff;
					box-shadow: 1px 1px 5px rgba(0, 0, 0, .2);
					position: relative;
					z-index: 1;
	
					.gift-product-item {
						position: relative;
						width: 160upx;
						margin-right: 20upx;
						font-size: $font-sm+2upx;
						color: $font-color-dark;
						line-height: 1.8;
	
						.product-image {
							width: 160upx;
							height: 160upx;
							border-radius: 6upx;
						}
	
						.price {
							background: $uni-color-primary;
							color: #ffffff;
							padding: 5upx;
						}
					}
				}
			}
		}
	}
	//新人领取优惠券
	.gift{
		margin: 30% 17% 10% 17%;
		padding: 15px;
		background-color: #B42A28;
		border-radius: 10px;
		.gift-title{
			color: #FCCB90;
			font-size: $font-base;
			font-weight: 700;
			text-align: center;
		}
		.gift-desc{
			color: #FCCB90;
			font-size: $font-sm;
			text-align: center;
		}
		.gift-image{
			margin-top: 10px;
			text-align: center;
			image{
				width: 75px;
				height: 75px;
			}
		}
			
		.gift-content{
			margin-top: 20px;
			.gift-item{
				background-color: #F5D5A2;
				padding:10px;
				margin-top: 10px;
				height: 35px;
				display: flex;
				justify-content: space-between;
				align-items: center;
				.gift-item-label{
					color:#C12E25;
					font-size: $font-sm;
				}
				.gift-item-value{
					text-align: center;
					button{
						background-color: #B42A28;
						color: #FBC78F;
						font-size: $font-base;
						height: 30px;
						line-height: 30px;
					}
				}	
			}
		}
		.gift-message{
			margin-top: 10px;
			color: #F8C180;
			font-size: $font-base;
			text-align: center;
		}
		.gift-action{
			margin-top: 30px;
			text-align: center;
			button{
				background-color: #F8C180;
				color: #7B4F15;
				height: 35px;
				line-height: 35px;
				font-size: $font-base;
				font-weight: 700;
			}
		}
	}
	.gift-close{
		display: flex;
		justify-content: center;
		margin-top: 20px;
		color: #fff;
	}
	.feedback {
		margin: 35% 17% 10% 17%;
		padding: 15px;
		background-color: #ffffff;
		border-radius: 10px;

		.feedback-title {
			color: $font-color-dark;
			font-size: $font-lg;
			font-weight: 700;
			text-align: center;
		}

		.feedback-desc {
			color: $font-color-base;
			font-size: $font-base;
			text-align: left;
			margin: 20px 0;
		}

		.feedback-action {
			margin-top: 30px;
			text-align: center;

			button {
				background-color: $base-color;
				color: #ffffff;
				height: 35px;
				line-height: 35px;
				font-size: $font-base;
				font-weight: 700;
			}
		}
	}
	.feedback-close {
		display: flex;
		justify-content: center;
		margin-top: 20px;
		color: #ffffff;
	}
	.sales {
		margin: 30% 17% 10% 17%;
		padding: 15px;
		background-color: #ffffff;
		border-radius: 10px;
		.sales-title {
			color: $font-color-dark;
			font-size: $font-lg;
			font-weight: 700;
			text-align: center;
		}
		.sales-desc {
			color: $font-color-light;
			font-size: $font-sm;
			text-align: center;
			margin: 20px 0;
		}
		.sales-action {
			margin-top: 30px;
			text-align: center;

			button {
				background-color: $base-color;
				color: #ffffff;
				height: 35px;
				line-height: 35px;
				font-size: $font-base;
				font-weight: 700;
			}
		}
	}
	.sales-close {
		display: flex;
		justify-content: center;
		margin-top: 20px;
		color: #ffffff;
	}
</style>